body {
  overflow: hidden;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.clearfix::after{
	content: "";
	display: block;
	clear: both;
	width: 0;
	height: 0;
}

@font-face {
  font-family: "hermit";
  src: url(../assets/fonts/Hermit-medium.otf) format("opentype");
}

* {
  -webkit-tap-highlight-color: transparent;
}

.frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.frame .title{
	position: absolute;
	right: 10px;
	top: 10px;
	margin: 0;
	color: #666;
	font-size: 1.5em;
	font-family: simhei;
}

[i18n]:empty:before {
  content: attr(content);
}

.i18n-ja [i18n]:empty:before {
  content: attr(content-ja);
}

.preview-toolbar {
  width: 100%;
  height: 28px;
  padding-top: 4px;
  top: 0;
  background-color: rgba(211, 211, 211, 0.24);
  border-bottom: 1px solid #bbb;
  overflow: hidden;
}

.full.hide #h2{
	transition: height 1s;
	height:0px;
	overflow: hidden;
}

.preview-toolbar > * {
  float: right;
  margin-right: 8px;
}

#run {
  margin-bottom: 4px;
}

#run > span > span:not(.button-text) {
  color: #49bf49;
  line-height: 0;
}

#tutorial-content {
  font-size: 15px;
  padding-left: 12px;
  padding-right: 6px;
  overflow-y: auto;
  box-sizing: border-box;
  color: #333;
}

#tutorial-content pre {
  background-color: rgba(245, 245, 245, 0.36);
  padding: 0.5em;
  margin-right: 12px;
  border: 1px solid #EEE;
  overflow-x: auto;
}

#tutorial-content pre > code {
  display: inline-block;
  width: inherit;
  background-color: transparent;
  padding: 0;
  border: none;
  color: #333;
}

#tutorial-content code {
  font-family: "hermit";
  font-size: 13px;
}

#tutorial-content h2 code {
  font-size: inherit;
}

#tutorial-content h2 {
  color: #333;
}

#tutorial-content code {
  background-color: rgba(245, 245, 245, 0.36);
  padding: 2px 4px 0px;
  border: 1px solid #EEE;
  color: rgb(147, 15, 128);
}

#tutorial-content a {
  text-decoration: none;
}

#tutorial-content ul {
  padding-left: 26px;
}

#tutorial-content .welcome-logo {
  position: absolute;
  top: 18px;
  right: 8px;
}

#pages-previous,
#pages-next {
  cursor: pointer;
  color: rgba(24,103,194,0.81);
}

#tutorial-pages {
  white-space: nowrap;
  position: absolute;
  right: 22px;
  bottom: 8px;
  cursor: default;
  background-color: rgb(245, 245, 245);
  opacity: 0.5;
  -webkit-transition: opacity .1s;
          transition: opacity .1s;
  border-radius: 4px;
  padding: 4px;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
}

#tutorial-pages:hover {
  opacity: 1;
}

body .ace_scrollbar {
    display: none;
}

body .ace_editor:hover .ace_scrollbar {
    display: block;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

button {
  cursor: pointer;
  color: #222;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
}

button:focus {
  outline: 0;
}

#styling {
  float: left;
  margin-left: 8px;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
}

#styling input {
  display: none;
}

.custom-button {
  pointer-events: none;
}

.custom-button > span {
  pointer-events: auto;
  font-size: 14px;
  height: 24px;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  padding: 2px 6px 3px;
  border: 1px solid #AAA;
  background: -webkit-linear-gradient(#F7F7F7, #DDD);
  background: linear-gradient(#F7F7F7, #DDD);
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
}

.custom-button > span:hover {
  border: 1px solid #888;
}

.custom-button > span:active {
  background: -webkit-linear-gradient(#DDD, #F7F7F7);
  background: linear-gradient(#DDD, #F7F7F7);
}

#styling input:checked ~ span {
  color: #DDD;
  background: -webkit-linear-gradient(#333, #656565);
  background: linear-gradient(#333, #656565);
}

.styling-icon {
  pointer-events: none;
  float: left;
  width: 18px;
  height: 16px;
  margin-top: 1px;
}

.styling-label {
  pointer-events: none;
  float: right;
  line-height: 20px;
}

.icon-ios {
  background: url('../assets/icons/apple.svg') left / 60px no-repeat transparent;
  margin-left: -3px;
}

.icon-android {
  background: url('../assets/icons/android.svg') left / 60px no-repeat transparent;
  margin-left: -1px;
}

#placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 10;
  -webkit-animation: pulse 0.5s ease-in-out infinite alternate;
          animation: pulse 0.5s ease-in-out infinite alternate;
}

#placeholder svg {
  width: 200px;
  height: 200px;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}


.next-tutorial {
  display: table;
  margin: 20px auto 30px;
}

.next-tutorial:hover {
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
